<template>
  <div>
    <h1>侦听器watch</h1>
    <p>{{ message }}</p>
    <button @click="handleClick">点击我</button>
    <input type="text" v-model="message" />
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
const message = ref("hello world");
const handleClick = () => {
  message.value = "hello vue3";
};
watch(
  message,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
    if (newVal.length > 5) {
      message.value = oldVal;
    }
  },
  {
    immediate: true,
    deep: true
  }
);
</script>
